﻿<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
<title>登录界面</title>
<script type="text/javascript" src="fream/jquery-1.9.1.min.js"></script><link rel="stylesheet" type="text/css" href="fream/bootstrap/css/bootstrap.min.css" />

<style type="text/css">
html,body {
	height: 100%;
}
.box {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699FF', endColorstr='#6699FF'); /*  IE */
	background-image:linear-gradient(bottom, #023a60 0%, #025f9a 100%);
	background-image:-o-linear-gradient(bottom, #023a60 0%, #025f9a 100%);
	background-image:-moz-linear-gradient(bottom, #023a60 0%, #025f9a 100%);
	background-image:-webkit-linear-gradient(bottom, #023a60 0%, #025f9a 100%);
	background-image:-ms-linear-gradient(bottom, #023a60 0%, #025f9a 100%);
	
	margin: 0 auto;
	position: relative;
	width: 100%;
	height: 100%;
}
.login-box {
	width: 100%;
	max-width:1200px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 5.7%;
	background: url(images/login.png) center;
	margin-top: -200px;
	
	/*border: 1px solid red;*/
	/*设置负值，为要定位子盒子的一半高度*/
	
}
@media screen and (min-width:500px){
	.login-box {
		left: 50%;
		/*设置负值，为要定位子盒子的一半宽度*/
		margin-left: -600px;
	}
}	

.form {
	width: 100%;
	max-width:254px;
	height: 275px;
	margin: 110px auto 0px auto;
	padding-top: 0px;
}	
.login-content {
	height: 300px;
	width: 100%;
	max-width:1200px;
	/*background-color: rgba(255, 250, 2550, .6);*/
	float: left;
}		
	
	
.input-group {
	margin: 0px 0px 16px 0px !important;
}
.form-control,
.input-group {
	height: 34px;
}
.form-group {
	margin-bottom: 37px !important;
	width: 250px;
}
.login-title {
	padding: 10px 10px;
	background-color: rgba(0, 0, 0, .6);
}
.login-title h1 {
	margin-top: 10px !important;
}
.login-title small {
	color: #fff;
}

.link p {
	line-height: 20px;
	margin-top: 30px;
}
.btn-sm {
	padding: 8px 24px !important;
	font-size: 16px !important;
}
.login-btn{
	margin-left: 28%!important;
	width: 48%!important;
}
.input-group-addon{
	background-color: rgba(238,238,238,.3);
	border-color: rgba(238,238,238,.3);
}
.input-group-addon span{
	color: #484848!important;
}
input{
	background-color: rgba(255,255,255,.2)!important;
	border-color: rgba(238,238,238,0)!important;
	color: #000!important;
}
.btn-info{
	background-color: rgba(0,0,0,0)!important;
}
</style>

</head>

<body style="width: 100%;text-align: center;">
<div class="box">
	<div class="box-bg">
		<div class="login-box">
			<!-- <div class="login-title text-center">
				<h1><small>登录</small></h1>
			</div> -->
			<div class="login-content " style="margin:0 auto;">
				<div class="form">
				<form action="#" onsubmit="return false" method="post">

					<div class="form-group">
						<div class="col-xs-12">
							<label class="remind" style="color: red;font-size: 16px;"> &nbsp;</label>
						</div>
						<div class="col-xs-12  ">
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
								<input type="text" id="username" name="username" class="form-control" placeholder="用户名">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12  ">
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
								<input type="password" id="password" name="password" class="form-control" placeholder="密码">
							</div>
						</div>
					</div>
					<div class="form-group verifyCode-container">
						<div class="col-xs-8">
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
								<input type="text" id="verifyCode"  class="form-control" placeholder="验证码">
							</div>
						</div>
					</div>
					<div class="form-group verifyCode-container">
						<img id="img_verifyCode"  alt="验证码" width="70" height="33"/>
					</div>

					<div class="form-group form-actions">
						<div class="col-xs-4 col-xs-offset-4 login-btn ">
							<button id="login_btn" type="button" class="btn col-sm-12 btn-info">登录</button>
						</div>
					</div>

				</form>
				</div>
			</div>
		</div>
	</div>	
</div>
 <!--  <script type="text/javascript" src="js/ie.js"></script>  -->
</body>


<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="fream/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="fream/bootstrap/js/"></script>
 <script type="text/javascript">
    
  var baseUrl="/yuxi";
  var user=(function(user){
    user.login=function(date,callbacksuccess,callbackerror){
      $.ajax({
        url:baseUrl+"/userLogin.do",
        data:date,
        timeout : 10000,
        type:"get",
        dataType:"json",              
        success:callbacksuccess,
        error:callbackerror
      });
    };
    return user;
  }(window.user={}));

   
  $(function(){
	  
    $.ajax({
      type:"get",
      url:"getVerifyCodeOff.do",
      dataType:"json", 
      cache:false,
      success:function(data){
    	  $(".verifyCode-container").attr("data-is",data.status);
    	  if(!data.status){
    		 $(".verifyCode-container").attr("data-is",data.status);
    		 $(".verifyCode-container").hide(); 
    	  }
      }
    })
        $("#img_verifyCode").click(function(){
            $("#img_verifyCode").attr("src",baseUrl+"/getVerifyCode.do?"+Math.random());
        });
         $("#img_verifyCode").attr("src",baseUrl+"/getVerifyCode.do?"+Math.random());
     $("body").keydown(function(e){
     	if(e.keyCode=="13")
     	{
     		 $("#login_btn").click();
     	}
     })
    $("#login_btn").click(function(){
      if($(this).text()!="登录")
      {
        return ;
      }
      var username=$("#username").val();
      var password=$("#password").val();
      var verifyCode=$("#verifyCode").val();
      //验证长度合法性
      if(username.length<6||username.length>20){
        $(".remind").text("用户名长度为6-20");
        return;
      }
      if(password.length<6||password.length>20){
        $(".remind").text("密码长度为6-20");
        return;
      }
      
      var isX=$(".verifyCode-container").attr("data-is");
       if(verifyCode.length<=0&&isX=="true"){
         $(".remind").text("请输入验证码");
       }

      $("#login_btn").text("登录中...");
      var date={};
      date.userAccount=username;
      date.pwd=password;
      date.verifyCode=verifyCode;
            // $.getJSON(baseUrl+"/userLogin.do?jsoncallback=?", date,function(json){
            //   alert("JSON Data: "+json);
            // });
           
      user.login(date,function(msg){
        if(msg.status){
          window.location.href=msg.object;
        }else{
          $(".remind").text(msg.msg);
          $("#login_btn").text("登录");
        }
      },function(data){
        $(".remind").text("响应超时");
        $("#login_btn").text("登录");
      });

    });

  });
  
</script>

</html>